<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="js/wangEditor.min.js"></script>
    <script src="js/JQ.js"></script>

    <style>
        .mainHeader{
            padding-top: 1px;
            padding-bottom: 1px;
            background-color: white !important;
            border-bottom: 5px solid #0b6cb8;
        }

        .logo_icon{

            height: 38px;
        }

        .liColor{
            color: #4f4f4f

        }

        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 300px;
        }
        #publishBtn{
            width: 100px;
        }
        #fbwz{
            width: 100px;
        }
        #fanhui{
            left: 60px;
        }
    </style>

</head>
<body style="background-color: whitesmoke">

<div class="container-fluid">

    <div class="row" style="min-height: 10px"></div>

    <div class="row">
        <div class="col-md-1">


        </div>

        <div class="col-md-2" style="padding-right: 0px">

            <div class="row">

                <div class="col-md-3"></div>

                <!--
                <div class="col-md-9">
                    <div class="card">

                        <ul class="nav nav-pills nav-fill flex-column">
                            <li class="nav-item">
                                <a class="nav-link active list-group-item" href="#">发布文章</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link liColor list-group-item" href="#">文章管理</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link liColor list-group-item" href="#">分类管理</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link liColor list-group-item" href="#">退出</a>
                            </li>
                        </ul>
                    </div>
                    

                </div>
                -->

            </div>


        </div>

        <div class="col-md-6" style="padding-left: 0px">
            <div class="card">
     

                <div class="card-body" style="min-height: 1000px">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="input-group mb-1 mt-2 ml-0 mr-1" >
                                <div class="input-group-prepend">
                                    <span class="input-group-text"  >文章标题</span>
                                </div>
                                <input id="titleInput" type="text" class="form-control" placeholder="标题不多于100字，文本不多于1000字" style="margin-right: 5px">
                            </div>
							<input id='auther' type='text' placeholder="作者">
                        </div>

                    </div>


                    <div style="padding: 8px 0; color: #ccc"></div>
                    <!--
                    <div id="div1" class="toolbar">
                    </div>
                    -->

                    <div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
                        <!--                        <p>请输入内容</p>-->
                    </div>

                    <div class="row">

                        <div class="col-md-5">
                            <!--
                            <div class="input-group mb-3 mt-3 ml-0" >
                                
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-default">文章分类</span>
                                </div>
                                
                                <input id="categoryInput" type="text" class="form-control" >
                            </div>
                            -->
                        </div>
                    </div>


                    <div class="row" style="padding: 15px">

                        <div class="col-md-1"></div>
                        <div class="col-md-2 ml-0" id=fbwz>
                            <button type="button" class="btn btn-primary" id="publishBtn">发布文章</button>
                        </div>
                        <div class="col-md-4" id='fanhui'>
                            <button id='fanhui' onclick="fanhui()" type="button" class="btn btn-light">返回</button>
                        </div>



                    </div>

                </div>

            </div>
        </div>

        <div class="col-md-2">


        </div>
    </div>

</div>

</body>
	<script>
        $(function () {
            //富文本编辑器初始化代码
            var E = window.wangEditor;
            var editor = new E('#div1', '#div2');

            editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
            editor.create();

            //创建replaceAll()函数,用于替换字符串中出现的所有某个字符
            String.prototype.replaceAll = function (FindText, RepText) {
                return this.replace(new RegExp(FindText, "g"), RepText);
            };

            //发布文章按钮的点击事件，即封装数据，向后台传递
            $("#publishBtn").click(function () {
            	var titleData = document.getElementById("titleInput").value;
            	var auther = document.getElementById("auther").value;
            	var date = new Date();
            	var thedate = date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate()
            	//alert(date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate());
            	//var textData = document.getElementById("div2").value;
    
                console.info("click");
                var postData={};
                postData.title=$("#titleInput").val();
                postData.category=$("#categoryInput").val();

                //替换双引号为两个单引号，方便编写SQL语句插入数据库中
                //var content=editor.txt.html().replaceAll("\"","\'\'");
                var content = editor.txt.html();
                //alert(content[3,content.zise-8]);
            
                
                //alert(titleData+"  "+content);
                /*
                postData.content=content;

                console.info(content);
                postData.author_acc="123";
                postData.author_name="admin";
                postData.create_time=new Date().toLocaleDateString();
                postData.last_edit_time=new Date().toLocaleDateString();
                console.info(postData);
                */
				
                if(jmz.GetLength(content)>=2000 || jmz.GetLength(titleData)>=200)
               	{
                	//alert(jmz.GetLength(content));
                	//alert(jmz.GetLength(titleData));
                	alert("标题超过100字或文本超过1000字，请重新输入");
               	}
                else{
                	//向后台传递数据，需要根据具体后台来改
                    $.post("uppaper", {
                    	title:titleData,
                    	text:content,
                    	auther:auther,
                    	date:thedate
                    }, function(data,status) {
                        alert('数据：'+data+'状态：'+status);
                        window.location.replace("index.html");
                    })
                }
                          
            })
        })
        
        var jmz = {};
		jmz.GetLength = function(str) {
		    return str.replace(/[\u0391-\uFFE5]/g,"aa").length;   //先把中文替换成两个字节的英文，在计算长度
		};  
		
        //点击返回按键
        var fanhui = function(){
        	window.location.replace("index.html");
        }
    </script>
</html>
